<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./blogger.css">
    <title>博客平台</title>
</head>

<body>
    <!-- 头部信息栏 -->
    <div class="head1">
        <div class="head2">
            <!-- 网站图标 -->
            <div class="log1">
                <img src="./img/logo.png" alt="图片加载失败">
            </div>
            <!-- 输入框 -->
            <div class="input-div">
                <input type="text">
                <img src="./img/bg_search_submit.png" alt="" class="serch1">
            </div>
            <img src="./img/rss.png" alt="" class="wifi">
        </div>

    </div>

    <!-- 导航栏 -->
    <div class="menu-div">
        <div class="menu">
            <ul>
                <li><a href="#" style="background-color: white; color: rgb(0,68,179);line-height: 30px;">Wopus首页</a>
                </li>

                <li><a href="#">基础知识</a>
                    <!--下拉框的内容 -->
                    <div class="submenu" style="width:341px">
                        <ul>
                            <li><a href="#">WP简介</a></li>
                            <li><a href="#">基础使用</a></li>
                            <li><a href="#">安装详情</a></li>
                            <li><a href="#">新手上路</a></li>
                        </ul>
                    </div>
                </li>

                <li><a href="#">使用进阶</a>
                    <div class="submenu" style="width:596px ;">
                        <ul>
                            <li><a href="#">主体DIY</a></li>
                            <li><a href="#">主题制作</a></li>
                            <li><a href="#">主题汉化</a></li>
                            <li><a href="#">技术分享</a></li>
                            <li><a href="#">插件一族</a></li>
                            <li><a href="#">插件制作</a></li>
                            <li><a href="#">插件汉化</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">主题</a>
                    <!--下拉框的内容 -->
                    <div class="submenu" style="width:426px ;">
                        <ul>
                            <li><a href="#">一栏式</a></li>
                            <li><a href="#">二栏式</a></li>
                            <li><a href="#">三栏式</a></li>
                            <li><a href="#">四栏式</a></li>
                            <li><a href="#">混合式</a></li>
                        </ul>
                    </div>
                </li>

                <li><a href="#">插件</a>
                    <div class="submenu" style="width:596px ;">
                        <ul>
                            <li><a href="#">反垃圾类</a></li>
                            <li><a href="#">评论增强类</a></li>
                            <li><a href="#">RSS增强类</a></li>
                            <li><a href="#">文本编辑类</a></li>
                            <li><a href="#">广告管理类</a></li>
                            <li><a href="#">图片管理类</a></li>
                            <li><a href="#">标签管理类</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">博文精选</a>
                    <div class="submenu" style="width:510px ;">
                        <ul>
                            <li><a href="#">娱乐</a></li>
                            <li><a href="#">文化</a></li>
                            <li><a href="#">科技</a></li>
                            <li><a href="#">时事</a></li>
                            <li><a href="#">财经</a></li>
                            <li><a href="#">生活</a></li>
                        </ul>
                    </div>
                </li>

                <li><a href="#">博客主机</a>
                    <div class="submenu" style="width:510px ;">
                        <ul>
                            <li><a href="#">国内主机</a></li>
                            <li><a href="#">国外主机</a></li>
                            <li><a href="#">用户反馈</a></li>
                            <li><a href="#">域名常识</a></li>
                            <li><a href="#">主机常识</a></li>
                            <li><a href="#">免费空间</a></li>
                        </ul>
                    </div>
                </li>

                <li><a href="#">博客赚钱</a>
                    <div class="submenu" style="width:256px ;">
                        <ul>
                            <li><a href="#">买卖链接</a></li>
                            <li><a href="#">广告赚钱</a></li>
                            <li><a href="#">话题赚钱</a></li>
                        </ul>
                    </div>
                </li>

                <li><a href="#">博客聚会</a>
                    <div class="submenu" style="width:256px ;">
                        <ul>
                            <li><a href="#">世界</a></li>
                            <li><a href="#">中国</a></li>
                            <li><a href="#">Wopus机会</a></li>
                        </ul>
                    </div>
                </li>

                <li><a href="#">博客工具</a></li>
                <li><a href="#">Wopus论坛</a></li>
            </ul>
        </div>
    </div>


    <!-- 主体部分 -->
            <div class="weather-div" style="width:710px;margin:auto;height:60px;">
            <iframe style="width: 791px; height: 70px; float: left;" class="weather" name="weather_inc" src="https://i.tianqi.com/index.php?c=code&id=2&num=6" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
        </div>
    <div class="body1">
        <!-- 中间的图片 -->
        <div class="img84">
            <img src="./img/84dns.png" alt="">
        </div>

        <!-- 站内公告 -->
        <div class="notice">
            <div class="notice-left">
                <span>站内公告</span>
            </div>

            <div class="notice-div">
                <!-- 小三角 -->
                <div class="sanjia">
                    <img src="./img/wopus_tjgg_jt.png" alt="">
                </div>
                <span class="notice-contont" style="color: red;">Wopus祝各位新年快乐</span>
            </div>

            <div class="notice-div" style="margin-left: 15px;">
                <!-- 小三角 -->
                <div class="sanjia">
                    <img src="./img/wopus_tjgg_jt.png" alt="">
                </div>
                <span class="notice-contont">Wopus淘宝店优惠码计划启动</span>
            </div>

            <div class="notice-div" style="margin-left: 15px;">
                <!-- 小三角 -->
                <div class="sanjia">
                    <img src="./img/wopus_tjgg_jt.png" alt="">
                </div>
                <span class="notice-contont">Wopus淘宝店启动全新风格图片</span>
            </div>

            <div class="notice-div" style="margin-left: 15px;">
                <!-- 小三角 -->
                <div class="sanjia">
                    <img src="./img/wopus_tjgg_jt.png" alt="">
                </div>
                <span class="notice-contont" style="color: red;">WopusIDC主机淘宝客推广方法</span>
            </div>
        </div>

        <!-- 装左右两大块 -->
        <div style="display: flex;">
            <!-- 左边区域 -->
            <div class="body-left">
                <!-- 第一栏 -->
                <div style="display:flex ;">
                    <!-- 左边块 -->
                    <div class="left-contont1">
                        <!-- 左上角图片 -->
                        <div class="left-img">
                            <img src="./img/titleNews.gif" alt="">
                        </div>
                        <div style="margin-top: 15px;">
                            <span class="left-title1">安全更新,WordPress3.1.1发布</span>
                        </div>

                        <ul>
                            <li>光影互联提供.so国际英文域名服务</li>
                            <li>WordPress主题TwentyTen扩展版</li>
                            <li>Theme Name: ecoNews</li>
                            <li>WordPress主题: Anton</li>
                            <li>光影互联提供特色后缀域名注册</li>
                            <li>光影互联系列域名注册优惠公告</li>
                            <li>解决Win主机重定向死循环问题</li>
                        </ul>
                    </div>

                    <!-- 轮播图 -->
                    <div class="carousel-div">
                        <div>
                            <img src="./img/wordpresse7b3bbe58897e69bb4e696b0.jpg" alt="" class="active">
                            <img src="./img/wp31.jpg" alt="">
                            <img src="./img/wopus-cpanel.jpg" alt="">
                            <img src="./img/user.jpg" alt="">
                        </div>
                        <!-- 数字字下标 -->
                        <div class="subscript">
                            <div class="subscript1">1</div>
                            <div class="subscript1">2</div>
                            <div class="subscript1">3</div>
                            <div class="subscript1">4</div>
                        </div>
                    </div>
                </div>
                <!-- 第二栏 -->
                <div style="display: flex;">
                    <!-- 左边部分 -->
                    <div class="line2-left">
                        <div class="line2-head">
                            <div class="line2-title">基础知识</div>
                            <div class="line2-title1">
                                简介
                                <!-- 提示信息 -->
                                <span class="remind1">简介</span>
                            </div>

                            <div class="line2-title1" style="margin-left: 4px;">
                                安装
                                <span class="remind1">安装</span>
                            </div>

                            <div class="line2-title1" style="margin-left: 4px;">
                                设置
                                <span class="remind1">设置</span>
                            </div>

                            <div class="line2-title2">
                                新手上路
                                <span class="remind2">新手上路</span>
                            </div>
                        </div>

                        <!-- 内容部分 -->
                        <div class="line2-left-contont">
                            <!-- 中间部分 -->
                            <div style="display: flex;">
                                <div class="line2-left-img">
                                    <img src="./img/wp30a.png" alt="" style="margin-top: 2px;">
                                </div>
                                <!-- 中间的文字 -->
                                <div style="margin-left: 8px;" class="ada">
                                    <p class="line2-p1">WordPress 3.0RC版安装全解析</p>
                                    <p class="line2-p2">WordPress 3.0(WordPress3.0 RC 1发布)在功能上有</p>
                                </div>
                            </div>
                            <!-- 分割线 -->
                            <div class="hr1"></div>
                            <ul class="line2-ul" style="margin-top:10px ;">
                                <li>WordPress中文语言包使用教程</li>
                                <li>WordPress清理wp_postmeta全攻略</li>
                                <li>WordPress升级建议</li>
                                <li>WordPress3.0来了,你的主题准备好了吗？</li>
                                <li>WordPress插件安装解析</li>
                            </ul>
                        </div>
                    </div>
                    <!-- 右边部分 -->
                    <div class="line2-right">
                        <!-- 顶部标题栏 -->
                        <div class="line2-right-title-div">
                            <span class="line2-right-title">WordPress资讯</span>
                            <div class="line2-right-title1" style="margin-left: 50px;width: 96px;">
                                WordPress 3.1
                                <span class="line2-remind1">WordPress 3.1</span>
                            </div>

                            <div class="line2-right-title1" style="margin-left: 4px;">
                                最新动态
                                <span class="line2-remind1">最新动态</span>
                            </div>

                            <div class="line2-right-title2">
                                发展建议
                                <span class="line2-remind2">发展建议</span>
                            </div>
                        </div>
                        <ul>
                            <li>WordPress 3.1中文语言包Wopus版</li>
                            <li>WordPress 3.1正式版新功能解析</li>
                            <li>WordPress 3.1命名由来</li>
                            <li>WordPress 3.1正式版发布</li>
                            <li>反垃圾评论插件AKismet更新到2.5.3</li>
                            <li>安全更新,WordPress 3.0.5发布</li>
                            <li>WordPress无所不能</li>
                            <li>WordPress 3.1 RC2发布</li>
                            <li>重要安全更新,WordPress 3.0.4</li>
                        </ul>

                    </div>
                </div>
                <!-- 第三栏 -->
                <div style="display: flex;">
                    <!-- 左边区域 -->
                    <div class="line2-left">
                        <div class="line2-head">
                            <div class="line2-title">使用进阶</div>
                            <div class="line2-title1" style="width: 56px; margin-left: 35px;">
                                主题相关
                                <!-- 提示信息 -->
                                <span class="remind1" style="width: 52px;">主题相关</span>
                            </div>

                            <div class="line2-title1" style="margin-left: 4px; width: 56px;">
                                插件一族
                                <span class="remind1">插件一族</span>
                            </div>

                            <div class="line2-title2" style="width: 52px;">
                                主题DIY
                                <span class="remind2">主题DIY</span>
                            </div>
                        </div>

                        <!-- 内容部分 -->
                        <div class="line2-left-contont">
                            <!-- 中间部分 -->
                            <div style="display: flex;">
                                <div class="line2-left-img">
                                    <img src="./img/wp30b.png" alt="" style="margin-top: 2px;">
                                </div>
                                <!-- 中间的文字 -->
                                <div style="margin-left: 8px;" class="ada">
                                    <p class="line2-p1">WordPress技巧: 彻底清除pingbacks</p>
                                    <p class="line2-p2">当其他博客在文章中有提到你的博客或某一篇文章...</p>
                                </div>
                            </div>
                            <!-- 分割线 -->
                            <div class="hr1"></div>
                            <ul class="line2-ul" style="margin-top:10px ;">
                                <li>批量删除自定义栏目</li>
                                <li>ScribeFire: 博客离线发布工具</li>
                                <li>直接从www.gravatar.com主站加载头像</li>
                                <li>WordPress3.0多站点功能解析（三）</li>
                                <li>十大设计精美的基于WordPress的网站</li>
                            </ul>
                        </div>
                    </div>
                    <!--右边区域 -->
                    <div class="line2-right">
                        <!-- 顶部标题栏 -->
                        <div class="line2-right-title-div">
                            <span class="line2-right-title">主题推荐</span>
                            <div class="line2-right-title1" style="margin-left: 15px;width: 111px;color: red;">
                                主题完全翻译教程
                                <span class="line2-remind1" style="width: 110px;">主题完全翻译教程</span>
                            </div>

                            <div class="line2-right-title1" style="margin-left: 4px;">
                                三栏主题
                                <span class="line2-remind1" style="width: 60px;">三栏主题</span>
                            </div>
                            <div class="line2-right-title1" style="margin-left: 4px;">
                                CMS主题
                                <span class="line2-remind1" style="width: 60px;">CMS主题</span>
                            </div>

                            <div class="line2-right-title2">
                                付费主题
                                <span class="line2-remind2">付费主题</span>
                            </div>
                        </div>
                        <ul class="ul2">
                            <li>WordPress主题: Kryptonation</li>
                            <li>WordPress主题: HabaneraMagazine</li>
                            <li>WordPress主题:Quik</li>
                            <li>国人主题:iNeo</li>
                            <li>国人主题:Jauia's Debut</li>
                            <li>国人主题:W1</li>
                            <li>WordPress: Monte Cristo</li>
                            <li>WordPress主题: Maximum</li>
                            <li>国人主题: AsYLMF</li>
                        </ul>

                    </div>
                </div>

                <!-- 第四栏 -->
                <div style="display: flex;">
                    <!-- 右边区域 -->
                    <div class="line2-left">
                        <div class="line2-head">
                            <div class="line2-title">博客聚会</div>
                            <div class="line3-title1">
                                2009 WordCamp China
                                <!-- 提示信息 -->
                                <span class="remind1">2009 WordCamp China</span>
                            </div>
                        </div>

                        <!-- 内容部分 -->
                        <div class="line2-left-contont">
                            <!-- 中间部分 -->
                            <div style="display: flex;">
                                <div class="line2-left-img">
                                    <img src="./img/wp30c.png" alt="" style="margin-top: 2px;">
                                </div>
                                <!-- 中间的文字 -->
                                <div style="margin-left: 8px;" class="ada">
                                    <p class="line2-p1">WordCamp SF 2010 即将举行</p>
                                    <p class="line2-p2">美国当地时间5.1号,第四节WordCamp SF 2010将在洛</p>
                                </div>
                            </div>
                            <!-- 分割线 -->
                            <div class="hr1"></div>
                            <ul class="line2-ul" style="margin-top:10px ;">
                                <li>Wopus聚会礼品第二批开始派发</li>
                                <li>Wopus周六聚会大图分享</li>
                                <li>Wopus 2009 年底聚会现场</li>
                                <li>WordPress3.0北京非官方聚会邀请帖</li>
                                <li>WordCapm:ORLANDO</li>
                            </ul>
                        </div>
                    </div>
                    <!-- 左边区域 -->
                    <div class="line2-right">
                        <!-- 顶部标题栏 -->
                        <div class="line2-right-title-div">
                            <span class="line2-right-title">插件推荐</span>
                            <div class="line2-right-title1" style="margin-left: 67px;width: 71px;color: red;">
                                反垃圾插件
                                <span class="line2-remind1" style="width: 60px;">反垃圾插件</span>
                            </div>

                            <div class="line2-right-title1" style="margin-left: 4px;width: 83px;">
                                图片管理插件
                                <span class="line2-remind1" style="width: 79px;">图片管理插件</span>
                            </div>

                            <div class="line2-right-title2">
                                友情链接插件
                                <span class="line2-remind2" style="width: 80px;">友情链接插件</span>
                            </div>
                        </div>
                        <ul>
                            <li>插件推荐: 无觅相关文章插件</li>
                            <li>WP Super Cache更新 支持WP 3.0</li>
                            <li>WordPressPress相册插件: Overlay4WP</li>
                            <li>实现WP完美摘要输出插件: Limit Posts</li>
                            <li>插件控制Widget在页面显示</li>
                            <li>WordPress淘宝客推广插件</li>
                            <li>WP Super Cache使用全攻略</li>
                            <li>CommentLuv 2.7简体中文化</li>
                            <li>用Autoptimize插件给WP再提速</li>
                        </ul>

                    </div>
                </div>

                <!-- 第五栏 -->
                <div style="display: flex;">
                    <!-- 右边区域 -->
                    <div class="line2-left" style="height: 152px;">
                        <div class="line2-head">
                            <div class="line2-title">主机帮助</div>
                            <div class="line2-title1" style="width: 56px; margin-left: 29px;">
                                主机常识
                                <!-- 提示信息 -->
                                <span class="remind1" style="width: 52px;">主机常识</span>
                            </div>

                            <div class="line2-title1" style="margin-left: 4px; width: 56px;">
                                账户管理
                                <span class="remind1" style="width: 50px;">账户管理</span>
                            </div>

                            <div class="line2-title2" style="width: 52px;">
                                高级技巧
                                <span class="remind2" style="width: 50px;">高级技巧</span>
                            </div>
                        </div>

                        <!-- 内容部分 -->
                        <div class="line2-left-contont" style="height: 125px;">

                            <ul class="line2-ul" style="margin-top:10px ;">
                                <li>DA主机远程Mysql数据库使用说明</li>
                                <li>域名转出光影互联流程</li>
                                <li>WopusIDC主机如何找到.htaccess文件</li>
                                <li>WopusIDC主机如何找到.htaccess文件</li>
                                <li>查看主机磁盘空间使用情况</li>
                            </ul>
                        </div>
                    </div>
                    <!-- 左边区域 -->
                    <div class="line2-left" style="height: 152px;width: 378px;margin-left: 10px;">
                        <div class="line2-head">
                            <div class="line2-title">博文精选</div>
                            <div class="line2-title1" style="width: 32px; margin-left: 70px;">
                                科技
                                <!-- 提示信息 -->
                                <span class="remind1" style="width: 32px;">科技</span>
                            </div>

                            <div class="line2-title1" style="margin-left: 4px; width: 32px;">
                                文化
                                <span class="remind1" style="width: 32px;">文化</span>
                            </div>


                            <div class="line2-title1" style="margin-left: 4px; width: 32px;">
                                娱乐
                                <span class="remind1" style="width: 32px;">娱乐</span>
                            </div>

                            <div class="line2-title1" style="margin-left: 4px; width: 32px;">
                                时事
                                <span class="remind1" style="width: 32px;">时事</span>
                            </div>

                            <div class="line2-title1" style="margin-left: 4px; width: 32px;">
                                财经
                                <span class="remind1" style="width: 32px;">财经</span>
                            </div>

                            <div class="line2-title2" style="width: 32px;">
                                生活
                                <span class="remind2" style="width: 32px;">生活</span>
                            </div>
                        </div>

                        <!-- 内容部分 -->
                        <div class="line2-left-contont" style="height: 125px; width: 376px;">
                            <ul class="line2-ul" style="margin-top:10px ;">
                                <li>Wopus继续发送Google Wave邀请</li>
                                <li>Wopus开始放送Google Wave</li>
                                <li>新互联网推出免费1G企业邮箱申请</li>
                                <li>谷歌推域名解析服务Public DNS</li>
                                <li>Google发布网站载入速度分析工具</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右边区域 -->
            <div class="body-right">
                <!-- 第一个图标 -->
                <div class="right-line1-img">
                    <p>WordPress 3.1</p>
                    <div style="display: flex; margin-top: 10px;">
                        <div class="right-line1-word" style="margin-left: 15px;">程序</div>
                        <div class="right-line1-word" style="width: 69px;">中文语言包</div>
                        <div class="right-line1-word1" style="width: 70px;">语言包使用</div>
                    </div>
                </div>
                <!-- 第二个图标 -->
                <div class="right-line1-img1" style="margin-top: 10px;">
                    <p>bbPress1.02版</p>
                    <div style="display: flex;margin-top: 10px;">
                        <div class="right-line1-word" style="margin-left: 15px;">程序</div>
                        <div class="right-line1-word1" style="width: 70px;">安装教程</div>
                    </div>
                </div>
                <!--  -->
                <div class="line2-left" style="width: 247px;">
                    <div class="line2-head">
                        <div class="line2-title">WopusIDC</div>

                        <div class="line2-title2" style="width: 85px;margin-left: 75px; color: red;">
                            国际域名55元
                            <span class="remind2" style="width: 85px;">国际域名55元</span>
                        </div>
                    </div>

                    <!-- 内容部分 -->
                    <div class="line2-left-contont" style="width: 247px;">
                        <!-- 中间部分 -->
                        <div style="display: flex;">
                            <div class="line2-left-img">
                                <img src="./img/temp_90-60.png" alt="" style="margin-top: 2px;">
                            </div>
                            <!-- 中间的文字 -->
                            <div style="margin-left: 8px;" class="ada">
                                <p class="line2-p1">WopusIDC电信服务器通知</p>
                                <p class="line2-p2">WopusIDC电信服务器(ip结尾:96.26) 目前</p>
                            </div>
                        </div>
                        <!-- 分割线 -->
                        <div class="hr1"></div>
                        <ul class="line2-ul" style="margin-top:10px ;">
                            <li>光影互娱提供特价.at域名注册服务</li>
                            <li>光影互娱提供免费.tk域名注册服务</li>
                            <li>光影互娱开始提供.co顶级域名注册服务</li>
                            <li>WopusIDC主机数据备份说明</li>
                            <li>WopusIDC 2010圣诞、元旦促销公告</li>
                        </ul>
                    </div>
                </div>

                <!--  -->
                <div class="line2-left" style="width: 249px;">
                    <div class="line2-head">
                        <div class="line2-title">博客推荐</div>

                        <div class="line2-title2" style="width: 85px;margin-left: 75px; color: red;">
                            给Wopus投稿
                            <span class="remind2" style="width: 85px;">给Wopus投稿</span>
                        </div>
                    </div>

                    <!-- 内容部分 -->
                    <div class="line2-left-contont" style="height: 167px; width: 247px;">
                        <!-- 中间部分 -->
                        <div style="display: flex;">
                            <div class="line2-left-img">
                                <img src="./img/ixinxian_smaill.jpg" alt="" style="margin-top: 2px;">
                            </div>
                            <!-- 中间的文字 -->
                            <div style="margin-left: 8px;" class="ada">
                                <p class="line2-p1">爱新鲜</p>
                                <p class="line2-p2">收集新鲜创意的玩意。</p>
                            </div>
                        </div>

                        <div style="display: flex;" class="ada">
                            <div class="line2-left-img">
                                <img src="./img/download.jpg" alt="" style="margin-top: 2px;">
                            </div>
                            <!-- 中间的文字 -->
                            <div style="margin-left: 8px;">
                                <p class="line2-p1">网管数据</p>
                                <p class="line2-p2">专注网吧系统,网吧安全,为网吧网管提供一个很好的学习和解决问题的</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!--  -->
                <div style="margin-top: -37px;">
                    <img src="./img/250-100_tool_ad.png" alt="">
                </div>

                <!--  -->
                <div class="line2-left" style="width: 249px;">
                    <div class="line2-head">
                        <div class="line2-title">博客赚钱</div>
                    </div>

                    <!-- 内容部分 -->
                    <div class="line2-left-contont" style="height: 215px; width: 247px;">
                        <!-- 中间部分 -->
                        <div style="display: flex;">
                            <div class="line2-left-img">
                                <img src="./img/temp_90-60.png" alt="" style="margin-top: 2px;">
                            </div>
                            <!-- 中间的文字 -->
                            <div style="margin-left: 8px;" class="ada">
                                <p class="line2-p1">独立博客投放Google的AdSense几个原则</p>
                                <p class="line2-p2">昨天收到Google的Adsense小组的邮件提</p>
                            </div>
                        </div>
                        <!-- 分割线 -->
                        <div class="hr1"></div>
                        <ul class="line2-ul" style="margin-top:10px ;">
                            <li>专访网赚高手JohnChow和Shoe</li>
                            <li>谷歌中文网站管理员博客阅读笔记</li>
                            <li>Google Adsense的六个优化技巧</li>
                            <li>谷歌广告官方微博; 博客中文谷歌广告的禁</li>
                            <li>警惕: 几种赚不了钱的网络赚钱方法</li>
                        </ul>
                    </div>
                </div>

                <!--  -->
                <div style="margin-top: 10px;">
                    <img src="./img/help_250.jpg" alt="">
                </div>

            </div>

        </div>

        <div class="line2-left" style="width: 949px;height: 108px;">
            <div class="line2-head">
                <div class="line2-title">友情链接</div>

                <div class="line2-title2" style="width: 145px;margin-left: 80%;">
                    友情链接要求PR>5
                    <span class="remind2" style="width: 115px;">友情链接要求PR>5</span>
                </div>
            </div>

            <!-- 内容部分 -->
            <div class="line2-left-contont" style="width: 947px;height: 80px;">
                <!-- 四张图片 -->
                <div style="display: flex;margin-top: 4px;">
                    <img src="./img/wopus.gif" alt="" style="margin-left: 7px;">
                    <img src="./img/xianguo88.gif" alt="" style="margin-left: 8px;">
                    <img src="./img/helloup_88x32.gif" alt="" style="margin-left: 18px;">
                    <img src="./img/385.png" alt="" style="margin-left: 7px;">
                </div>

                <div class="bottom-contont">
                    <span>终点科技网</span>
                    <span>24Beta中文IT资讯</span>
                    <span>糖果浏览器</span>
                    <span>P。linux Laboratory</span>
                    <span>草根站长</span>
                    <span>雅蛙网</span>
                    <span>Leica中文摄影杂志</span>
                    <span>黑莓时光</span>
                    <span>中国WEB第一站</span>
                    <span>中国莓</span>
                    <span>Chrome迷</span>
                    <span>手机元素</span>
                    <span>百特传媒</span>
                </div>

            </div>
        </div>
    </div>
    <!-- 底部信息栏 -->
    <div class="bottom-div">

        <div class="bottom-div2">
            <span>2011 Wopus中文博客平台. Powered by WordPress. 京ICP备09054226号</span>

            <div class="bottom-title1" style="margin-left: 20%;">Wopus简介</div>
            <div class="bottom-title1" style="width: 58px;">联系我们</div>
            <div class="bottom-title1" style="width: 58px;">合作伙伴</div>
            <div class="bottom-title1" style="width: 58px;">广告服务</div>
            <div class="bottom-title2" style="width: 53px;">投稿通道</div>
        </div>


    </div>
    <script>
        var index = 0;
        var img2 = document.querySelectorAll('.carousel-div img');//获取图片
        var lia = document.querySelectorAll(".subscript1")//获取数字下标
        console.log(lia);
        //下标的点击
        for (var i = 0; i < lia.length; i++) {
            (function (i) {
                lia[i].onclick = function () {
                    img2[index].className = "";
                    this.className = 'div-1';
                    lia[index].className = 'subscript1';
                    index = i;
                    //修改清晰图片
                    img2[index].className = "active";
                    //修改下标
                    lia[index].className = "div-1";
                };
            })(i);
        }
        //定时器，使轮播图自动切换
        var timer = setInterval(function () {
            img2[index].className = "";
            lia[index].className = "subscript1"
            if (index == img2.length - 1) {
                index = 0;
            } else {
                index++;
            }
            //修改清晰图片
            img2[index].className = "active";
            //修改下标
            lia[index].className = "div-1";
        }, 2000)
    </script>

</body>

</html>